
/**
 * @description 列表(表格)页面
 */

import React, { useEffect, useState } from "react"
import { ConfigProvider, Table, Button, Space, Pagination } from 'antd';

import getScrollX from "./utils/table/getScroll.js";

import ListHeader from "./ListHeader"
import ListSearch from './ListSearch';


import getTableRender from "@/components/TableRender";
import AbIcon from "@/components/DecorateIcons/Ab_Icon.jsx";

const tableColumns_initData = [
  {
    title: '用户名',
    dataIndex: 'yonghuming',
    ellipsis: false,
    sorter: true,
    options: [],
    renderType: '普',
  },
  {
    title: '头像',
    dataIndex: 'touxiang',
    ellipsis: false,
    sorter: false,
    options: [],
    renderType: '图',
  },
  {
    title: '身份证',
    dataIndex: 'shenfenzheng',
    ellipsis: false,
    sorter: false,
    options: [],
    renderType: '普',
  },
  {
    title: '类型',
    dataIndex: 'type',
    renderType: '标',
    options: [
      {
        value: 0,
        label: '单选题',
        color: 'default'
      },
      {
        value: 1,
        label: '多选题',
        color: 'processing'
      },
      {
        value: 2,
        label: '判断题',
        color: 'success'
      },
      {
        value: 3,
        label: '填空题',
        color: 'warning'
      },
      {
        value: 4,
        label: '主观题',
        color: 'error'
      },
    ]
  },
  {
    title: '状态',
    dataIndex: 'status',
    ellipsis: false,
    sorter: false,
    options: [
      {
        value: 0,
        label: '正常'
      },
      {
        value: 1,
        label: '锁定'
      },
    ],
    renderType: '切换1',
  },
]

const data = [
  {
    "key": 18,
    "yonghuming": "用户名8",
    "touxiang": "http://codegen.caihongy.cn/20241015/54bc9230567341e280fe1af205133d92.jpeg",
    "shenfenzheng": "440300199808080008",
    "status": 0,
    "type": 0,
  },
  {
    "key": 17,
    "yonghuming": "用户名7",
    "touxiang": "http://codegen.caihongy.cn/20241015/54bc9230567341e280fe1af205133d92.jpeg",
    "shenfenzheng": "440300199707070007",
    "status": 0,
    "type": 1,
  },
  {
    "key": 16,
    "yonghuming": "用户名6",
    "touxiang": "http://codegen.caihongy.cn/20241015/54bc9230567341e280fe1af205133d92.jpeg",
    "shenfenzheng": "440300199606060006",
    "status": 0,
    "type": 2,
  },
  {
    "key": 15,
    "yonghuming": "用户名5",
    "touxiang": "http://codegen.caihongy.cn/20241015/54bc9230567341e280fe1af205133d92.jpeg",
    "shenfenzheng": "440300199505050005",
    "status": 0,
    "type": 3,
  },
]

function ListPage({ list }) {

  let { base } = list
  let paginationBase = list.pagination.base

  let {
    tableIconFlag,
    table_icon_view,
    table_icon_delete,
    table_icon_edit,
    table_icon_others,
    table_text_view,
    table_text_delete,
    table_text_edit,

    table_config
  } = base



  let { align } = table_config

  const buttons = [
    {
      title: table_text_view,
      name: '查看',
      key: 'view',
      className: 'action-view',
      iconName: tableIconFlag ? table_icon_view : '',
    },
    {
      title: table_text_delete,
      name: '删除',
      key: 'delete',
      className: 'action-delete',
      iconName: tableIconFlag ? table_icon_delete : '',
    },
    {
      title: table_text_edit,
      name: '修改',
      key: 'edit',
      className: 'action-edit',
      iconName: tableIconFlag ? table_icon_edit : '',
    },
    {
      title: '其它',
      name: '其它',
      key: 'other',
      iconName: tableIconFlag ? table_icon_others : '',
    },
  ]

  // 列配置
  const tableColumns = tableColumns_initData.map(column => {
    return {
      ...column,
      align: align,
      width: 100,
      render: (text, record) => getTableRender({
        text,
        record,
        type: column.renderType,
        columnName: column.dataIndex,
        title: column.title,
        options: column.options,
      })
    }
  })
  tableColumns.push({
    title: '操作',
    align: align,
    width: 240,
    render: () =>
      <Space size="small" className='action-box' wrap={true}>
        {buttons.map(item => {
          return (
            <Button
              key={item.key}
              size='small'
              className={item.className || 'action-others'}
              icon={item.iconName ? <AbIcon iconName={item.iconName} /> : null}
            >
              {item.title}
            </Button>
          )
        })}
      </Space>
  })
  const scroll = {
    scrollToFirstRowOnChange: true,
    x: getScrollX(tableColumns)
  }
  // 分页
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100,
    showTotal: (total) => `共 ${total} 条`,
    itemRender: (_, type, originalElement) => {
      if (type === 'prev') {
        return <a>{paginationBase.prev}</a>;
      }
      if (type === 'next') {
        return <a>{paginationBase.next}</a>;
      }
      return originalElement;
    },
    hideOnSinglePage: paginationBase.hideOnSinglePage,
    showSizeChanger: paginationBase.showSizeChanger,
    rootClassName: 'ab-pagination',

  })

  const handleTableChange = (_pagination, filters, sorter) => {

    // 分页
    setPagination({
      ...pagination,
      ..._pagination
    })
  }
  useEffect(() => {
    setPagination(pre => {
      return {
        ...pre,
        itemRender: (_, type, originalElement) => {
          if (type === 'prev') {
            return <a>{paginationBase.prev}</a>;
          }
          if (type === 'next') {
            return <a>{paginationBase.next}</a>;
          }
          return originalElement;
        },
        hideOnSinglePage: paginationBase.hideOnSinglePage,
        showSizeChanger: paginationBase.showSizeChanger,
      }
    })
  }, [paginationBase])
  /**
 * @description 4.分页有变化时
 * @param {*} current 
 * @param {*} pageSize 
 */
  const handlePagination = (current, pageSize) => {

    setPagination({
      ...pagination,
      current,
      pageSize
    })
  };

  return (
    <div className="list-page" >

      {/* 搜索区域 */}
      <ListSearch base={list.search.base} />

      {/* 顶部按钮区域 */}
      <ListHeader base={base} />

      {/* 表格区域 */}
      <ConfigProvider
        theme={{
          components: {
            Table: {
              ...table_config
            },
            token: {
              colorText: table_config.colorText,
              fontSize: table_config.fontSize,
              colorBgContainer: table_config.colorBgContainer,
            }
          },
        }}
      >
        <Table
          className="list-table"
          rowSelection={{
            type: 'Checkbox',
          }}
          columns={tableColumns}
          dataSource={data}
          showSorterTooltip={false}
          pagination={false}
          onChange={handleTableChange}
          scroll={scroll}
        />
      </ConfigProvider>

      {/* 分页 */}
      <div className='ab-pagination-wrapper'>
        <Pagination
          {...pagination}
          rootClassName="ab-pagination"
          onChange={handlePagination}>
        </Pagination>

      </div>
    </div>
  )
}

export default ListPage